<template>
	<view>
		<view class="search">
			<u-search @change="change" height="70rpx" bgColor="#fff" :showAction="false" placeholder="请搜索手机号或者用户名"
				v-model="wd"></u-search>
		</view>
		<view class="title">
			<view class="title-text">
				客户列表
			</view>
			<view class="title-add" @tap="add">
				是新用户？点击添加~
			</view>
		</view>
		<view class="List" @tap="chousecustomer(item,i)" v-for="(item,i) in List" :key="i"
			:class="index == i?'newclass':''">
			<view class="l-name">
				<text>客户姓名：{{ item.name }}</text>
				<view @tap.stop="edit(item)">
					<u-icon name="setting-fill" color="#669bf9"></u-icon>
				</view>
			</view>
			<view class="l-tel">
				联系方式：{{ item.tel }}
			</view>
			<view class="l-address">
				客户地址：{{ item.address }}
			</view>
		</view>
		<view class="block">

		</view>
		<view class="sub-btn">
			<view class="submit" @tap="submit">
				确认选择
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				wd: '',
				List: [],
				index: -1,
				info: ''
			}
		},
		onShow() {
			this.getlist()
		},
		onReachBottom() {
			this.page++
			this.getlist()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getlist()
			uni.stopPullDownRefresh()
		},
		methods: {
			submit() {
				if (this.index == -1) {
					uni.showToast({
						title: '请选择一个客户',
						icon: 'none'
					})
					return
				}
				uni.$emit('customer', this.info)
				uni.navigateBack()
			},
			chousecustomer(info, i) {
				this.index = i
				this.info = info
				console.log(this.info, '?')
			},
			edit(info) {
				this.page = 1
				uni.navigateTo({
					url: '/pages/form/edit_customer?id=' + info.id
				})
			},
			change(e) {
				this.page = 1
				this.getlist()
			},
			getlist() {
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('cper/kehuList', {
					wd: this.wd,
					page: this.page
				}, (result) => {
					uni.hideLoading()
					if (this.page == 1) {
						this.List = []
					}
					this.List = this.List.concat(result.data.data)
				})
			},
			add() {
				this.page = 1
				uni.navigateTo({
					url: '/pages/form/add_customer'
				})
			}
		}
	}
</script>

<style>
	.block {
		width: 100%;
		height: 150rpx;
	}

	.search {
		margin: 20rpx auto 0 auto;
		width: 90%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title {
		margin: 20rpx auto 0 auto;
		width: 94%;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		height: 90rpx;
		align-items: center;
		border-radius: 16rpx 16rpx 0 0;
	}

	.title-text {
		margin-left: 30rpx;
		font-weight: bold;
		font-size: 30rpx;
	}

	.title-add {
		font-size: 24rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		padding: 5rpx 20rpx;
		background-color: #f0f5fc;
		color: #669bf9;
		margin-right: 30rpx;
	}

	.List {
		width: 94%;
		border-radius: 16rpx;
		background-color: #fff;
		margin: 20rpx auto 0rpx auto;
		color: #333;
	}

	.l-name {
		padding: 25rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.l-tel {
		padding: 20rpx 30rpx;
	}

	.l-address {
		line-height: 55rpx;
		padding: 20rpx 30rpx 25rpx 30rpx;
	}

	.sub-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit {
		width: 94%;
		height: 90rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		background-color: #669bf9;
	}

	.newclass {
		border: 1rpx solid #669bf9;
	}
</style>